/**图书、材料购置费 */
<template>
  <div>
    <el-form :model="queryForm" ref='formName' :rules="rules" >
      <!-- <el-row type="flex" class="row-bg" justify="end">
        <el-input disabled v-model="valFee" style="width:20%"></el-input>元
      </el-row> -->
      <el-row style="margin-top:15px" type="flex" class="row-bg" justify="space-between">
        <el-col :span="6">
        <h2 style="color:#101010" >{{$t('projectDeclara.equipmentCost')}}</h2>
        </el-col>
        <!-- <el-col :span="4">
        <h2 style="color:#101010" >{{$t('approveBudget.audit')}}{{$t('projectDeclara.equipmentCost')}}(元)</h2>
        </el-col> -->
      </el-row>
      <edu-table
        :pagination="false"
        :order="false" 
        :selection="false"
        :tooltipEffect="tooltipEffect"
        stripe
        :data="queryForm.studentListOne"
        size="mini"
      >
        <edu-table-column :label="$t('projectDeclara.preparing')" prop="personnelCost">
          <template slot-scope="scope">
             
              <span >{{scope.row.personnelCost}}</span>
          </template>
        </edu-table-column>
        <!-- <edu-table-column :label="$t('projectDeclara.jobContent')" prop="workContent" >
          <template slot-scope="scope">
             
              <span >{{scope.row.workContent}}</span>
          </template>
        </edu-table-column> -->
        <edu-table-column :label="$t('projectDeclara.money')" prop="budget" >
          <template slot-scope="scope">
             
              <span >{{scope.row.budget}}</span>
          </template>
        </edu-table-column>
        <edu-table-column :label="$t('projectDeclara.estimatBasis')" prop="remark" >
          <template slot-scope="scope">
              
              <span >{{scope.row.remark}}</span>
          </template>
        </edu-table-column>
        <!-- <edu-table-column  prop="approveBudget" >
          <template slot-scope="scope">
              <el-form-item  style="margin-top: 15px;" >
                <el-input @change="changeInput(scope.row,$event)" :disabled="compile=='审核'||compile=='查看'"
                    v-model.trim="scope.row.approveBudget" 
                    clearable
                    maxlength="11" >
                </el-input>
              </el-form-item>
          </template>
        </edu-table-column> -->
        
      </edu-table>
      <el-row style="margin-top:15px" type="flex" class="row-bg" justify="space-between">
        <el-col :span="6">
        <h2 style="color:#101010" >{{$t('projectDeclara.consumables')}}</h2>
        </el-col>
        <!-- <el-col :span="4">
        <h2 style="color:#101010" >{{$t('approveBudget.audit')}}{{$t('projectDeclara.consumables')}}(元)</h2>
        </el-col> -->
      </el-row>
      <edu-table
        :pagination="false"
        :order="false"
        :selection="false"
        :tooltipEffect="tooltipEffect"
        stripe
        :data="queryForm.studentListTow"
        size="mini"
      >
        <edu-table-column :label="$t('projectDeclara.preparing')" prop="personnelCost" >
          <template slot-scope="scope">
              
              <span >{{scope.row.personnelCost}}</span>
          </template>
        </edu-table-column>
        <!-- <edu-table-column :label="$t('projectDeclara.jobContent')" prop="workContent" >
          <template slot-scope="scope">
             
              <span >{{scope.row.workContent}}</span>
          </template>
        </edu-table-column> -->
        <edu-table-column :label="$t('projectDeclara.money')" prop="budget" >
          <template slot-scope="scope">
              
              <span >{{scope.row.budget}}</span>
          </template>
        </edu-table-column>
        <edu-table-column :label="$t('projectDeclara.estimatBasis')" prop="remark" >
          <template slot-scope="scope">
              
              <span >{{scope.row.remark}}</span>
          </template>
        </edu-table-column>
        <!-- <edu-table-column  prop="approveBudget" >
          <template slot-scope="scope">
              <el-form-item  style="margin-top: 15px;" >
                <el-input @change="changeInput(scope.row,$event)" :disabled="compile=='审核'||compile=='查看'"
                    v-model.trim="scope.row.approveBudget" 
                    clearable
                    maxlength="11" >
                </el-input>
              </el-form-item>
          </template>
        </edu-table-column> -->
      </edu-table>
      <el-row style="margin-top:15px" type="flex" class="row-bg" justify="space-between">
        <el-col :span="6">
        <h2 style="color:#101010" >{{$t('projectDeclara.purchaseFee')}}</h2>
        </el-col>
        <!-- <el-col :span="4">
        <h2 style="color:#101010" >{{$t('approveBudget.audit')}}{{$t('projectDeclara.purchaseFee')}}(元)</h2>
        </el-col> -->
      </el-row>
      <edu-table
        :pagination="false"
        :order="false"
        :selection="false"
        :tooltipEffect="tooltipEffect"
        stripe
        :data="queryForm.studentListSan"
        size="mini"
      >
        <edu-table-column :label="$t('projectDeclara.preparing')" prop="personnelCost" ></edu-table-column>
        <!-- <edu-table-column :label="$t('projectDeclara.jobContent')" prop="workContent" ></edu-table-column> -->
        <edu-table-column :label="$t('projectDeclara.money')" prop="budget" ></edu-table-column>
        <edu-table-column :label="$t('projectDeclara.estimatBasis')" prop="remark" >
         
        </edu-table-column>
        <!-- <edu-table-column  prop="approveBudget" >
          <template slot-scope="scope">
              <el-form-item  style="margin-top: 15px;"  label-width="0"  >
                <el-input @change="changeInput(scope.row,$event)" :disabled="compile=='审核'||compile=='查看'"
                    v-model.trim="scope.row.approveBudget" 
                    clearable
                    maxlength="11" >
                </el-input>
              </el-form-item>
          </template>
        </edu-table-column> -->
      </edu-table>
      <!-- <el-form-item :label="$t('projectDeclara.calculati')">
        <el-input type="textarea" :rows="4" disabled v-model="queryForm.textarea.remark" maxlength="500"></el-input>
      </el-form-item> -->
    </el-form>
  </div>
</template>
<script>

export default {
  props: {
      compile: {
          type: String,
          default: ''
      },
      dataList: {
          type: Object,
          default: () => {}
      }
  },
  data() {
    let cannotEnter = (rule, value, callback) => {
        let reg = /[`$]/im
        if (reg.test(value)) {
            return callback(new Error(this.$t('identificationToDoList.cannotContain')))
        } 
        // else if (value === '') {
        //     return callback()
        //     // return callback(new Error(this.$t('internship.pleaseEnter')))
        // }
        return callback()
    }
    return{
      fileList: [],
      options: {
        faculty: [],
        country: [],
        nameSchool: []
      },
      compileEdit: '',
      queryForm: {
        textarea: {
          firstType: 2,
          remark: ''
        },
        // condition: {
        studentListOne: [
          // { personnelCost: '', workContent: '', remark: '', budget: null, flag: false,firstType: 2, secondType: 1 }
        ],
        studentListTow: [
          // { personnelCost: '', workContent: '', remark: '', budget: null, flag: false,firstType: 2, secondType: 2 }
        ],
        studentListSan: [
          // { personnelCost: '', workContent: '', remark: '', budget: null, flag: false,firstType: 2, secondType: 3 }
        ],
        // },
       
      },
      valFee: 0,
      rulesOne: {
        personnelCost: [
          { validator: cannotEnter, trigger: 'blur' }
        ],
        workContent: [
          { validator: cannotEnter, trigger: 'blur' }
        ],
        remark: [
          { validator: cannotEnter, trigger: 'blur' }
        ],
        budget: [
          { validator: this.validateWeight, trigger: 'blur' }
        ]
      },
      rulesTow: {
        personnelCost: [
          { validator: cannotEnter, trigger: 'blur' }
        ],
        workContent: [
          { validator: cannotEnter, trigger: 'blur' }
        ],
        remark: [
          { validator: cannotEnter, trigger: 'blur' }
        ],
        budget: [
          { validator: this.validateWeight, trigger: 'blur' }
        ]
      },
      rulesSan: {
        personnelCost: [
          { validator: cannotEnter, trigger: 'blur' }
        ],
        workContent: [
          { validator: cannotEnter, trigger: 'blur' }
        ],
        remark: [
          {  validator: cannotEnter, trigger: 'blur' }
        ],
        budget: [
          { validator: this.validateWeight, trigger: 'blur' }
        ]
      },
      
      restaurants: [],
      semester: [],
      semesterRmpor: [],
      multipleSelection: [],
      tableData: []
    };
  },
  filters: {
    collegeAcademyList(val, array) {
      let str = "";
      for (let item of array) {
        if (val === item.value) {
          str = item.label;
        }
      }
      return str;
    }
  },
  methods: {
    validateWeight(rule, value, callback) {
      if (value > 0) {
        // let expReg = /^([1-9][0-9]*)+(.[0-9]{1,2})?$/
        let expReg = /^[1-9]$|^([0-9])+(.[0-9]{1,2})?$/
        if (!expReg.test(value)) {
          callback(new Error(this.$t('projectDeclara.decimalPlace')))
        } else {
          callback()
        }
      } else {
        callback(new Error(this.$t('projectDeclara.decimalPlace')))
      }
    },
    
    changeTbel() {
      // if (this.queryForm.studentListSan.length > 0 || this.queryForm.studentListTow.length > 0 || this.queryForm.studentListOne.length > 0) {
        // let list = this.queryForm.studentListSan.concat(this.queryForm.studentListTow,this.queryForm.studentListOne)
        // this.$emit('changeTab', list)
        this.queryForm.list = this.queryForm.studentListSan.concat(this.queryForm.studentListTow,this.queryForm.studentListOne)
        this.$emit('changeTab', this.queryForm)
      // }
    },
    changeInput(data,val) {
      if (val > 0) {
        // let expReg = /^([1-9][0-9]*)+(.[0-9]{1,2})?$/
        let expReg = /^[1-9]$|^([0-9])+(.[0-9]{1,2})?$/
        if (!expReg.test(val)) {
          // callback(new Error(this.$t('projectDeclara.decimalPlace')))
          this.$message.warning(this.$t('projectDeclara.decimalPlace'))
          this.$set(data, 'approveBudget', null)
          this.calculateMoney()
        } else {
          this.calculateMoney()
        }
      } else {
        // callback(new Error(this.$t('projectDeclara.decimalPlace')))
        this.$message.warning(this.$t('projectDeclara.decimalPlace'))
        this.$set(data, 'approveBudget', null)
        this.calculateMoney()
      }
    },
    calculateMoney() {
      this.valFee = 0
      let one = 0
      let tow = 0
      let three = 0
      if (this.queryForm.studentListOne.length > 0) {
        this.queryForm.studentListOne.forEach(el => {
          one+=Number(el.approveBudget) 
        })
      } 
      if (this.queryForm.studentListTow.length > 0) {
        this.queryForm.studentListTow.forEach(el => {
          tow+=Number(el.approveBudget) 
        })
      } 
      if (this.queryForm.studentListSan.length > 0) {
        this.queryForm.studentListSan.forEach(el => {
          three+=Number(el.approveBudget) 
        })
      }
      this.valFee += one+tow+three
      Math.round(this.valFee*100)/100
      this.changeTbel()
      this.$emit('change-valFee', this.valFee)
    }
  },
  mounted() {
    if (this.compile=='编辑') {
      if (this.dataList.budgetListTwo.length > 0) {
        this.dataList.budgetListTwo.forEach(el => {
          if (!el.secondType) {
            this.queryForm.textarea.remark = el.remark
          }
          if (el.firstType==2&&el.secondType==1) {
            // this.$set(el, 'flag', false)
            this.queryForm.studentListOne.push(el)
            // this.queryForm.studentListOne.splice(-1,1)
          }
          if (el.firstType==2&&el.secondType==2) {
            // this.$set(el, 'flag', false)
            this.queryForm.studentListTow.push(el)
            // this.queryForm.studentListTow.splice(-1,1)
          }
          if (el.firstType==2&&el.secondType==3) {
            // this.$set(el, 'flag', false)
            this.queryForm.studentListSan.push(el)
            // this.queryForm.studentListSan.splice(-1,1)
          }
        })
        this.calculateMoney()
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.p_cals:hover{
  cursor: pointer;
  color: #409eff;
}
.p_cals{
  color: #aaa
}
.inner-breadcrumb {
    .breadcrumb {
        span {
            font-weight: normal;
            color: #aaa;
        }
        a {
            font-weight: normal;
            color: #aaa;
        }
        a:hover {
            color: #409eff;
        }
        .last {
            font-weight: bold !important;
            cursor: default !important;
        }
        .disable {
            cursor: default !important;
        }
    }
}
.condition-title-p {
    font-weight: 400;
    font-style: normal;
    color: #2b3b4e;
    font-size: 18px;
    margin-bottom: 15px;
}
.base-info-title {
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #2b3b4e;
}
.table-style-baseinfo {
    background-color: rgba(210, 212, 214, 1);
    box-sizing: border-box;
    border-width: 0.5px;
    border-style: solid;
    border-color: rgba(210, 212, 214, 1);
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #8896a7;
    margin-bottom: 20px;
}

.table-style-baseinfo td {
    width: 25%;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #2b3b4e;
    height: 32px;
    padding: 0 10px;
}

.table-style-baseinfo .text-right-background-color {
    background-color: #fdfeff4d;
    text-align: right;
}

.text-left-background-none {
    text-align: left;
}
</style>